<template>
	<div>
		<!-- 面包屑导航 -->
		<breadcrumb></breadcrumb>
		<div class="control">
			<!-- 车牌号 -->
			<!-- <div class="inputItem">
        <div class="title">发送人</div>
        <div class="inputBox">
          <el-input v-model="userName" @keyup.enter.native="cread"> </el-input>
        </div>
      </div> -->
			<!-- 车型 -->
			<div class="inputItem">
				<div class="title">来源</div>
				<div class="inputBox">
					<el-select class="select" v-model="platform" placeholder="请选择" @change="changeSource($event)">
						<el-option v-for="item in sourceArr" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
			</div>
			<!-- 认证状态 -->
			<div class="inputItem">
				<div class="title">建单状态</div>
				<div class="inputBox">
					<el-select class="select" v-model="status" placeholder="请选择" @change="changeOrderStatus($event)">
						<el-option v-for="item in orderStatusArr" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="inputItem">
				<div class="title">发送时间</div>
				<el-date-picker size="small" v-model="createTime" type="datetimerange" :picker-options="pickerOptions"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
			</div>
			<!-- 查询 -->
			<el-button type="primary" size="small" icon="el-icon-search" @click="cread1">查询</el-button>
			<el-button type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
		</div>
		<div class="main">
			<div class="list">
				<el-table :data="records" style="width: 100%" ref="table">
					<el-table-column align="center" prop="" label="序号" width="80">
						<template slot-scope="scope">
							{{ scope.$index + 1 }}
						</template>
					</el-table-column>
					<el-table-column label="状态" width="100">
						<template slot-scope="scope">
							<div class="tag dispatched" v-if="!scope.row.status">
								<div class="dian"></div>
								<div class="text">未创建</div>
							</div>

							<div class="tag gery" v-else>
								<div class="dian"></div>
								<div class="text">已创建</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" label="信息来源">
						<template slot-scope="scope">
							<div v-if="scope.row.platform">司机端</div>
							<div v-else>货主端</div>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="userName" label="发送人">
					</el-table-column>
					<el-table-column align="center" prop="operator" label="运营商">
					</el-table-column>
					<el-table-column align="center" prop="fleetName" label="车队">
					</el-table-column>
					<el-table-column align="center" prop="driverName" label="司机">
					</el-table-column>
					<el-table-column align="center" prop="createTime" label="发送时间" sortable></el-table-column>
					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<div>
								<el-button type="text" size="small" v-if="permissions.queryCreateOrderByCid.perms!=null"
									@click="$router.push({ path: '/supplierManagement/operatorRequestDetails', query: { id: scope.row.cid }, })">查看</el-button>
								<el-button type="text" v-if="permissions.deleteCreateOrder.perms!=null" size="small"
									@click="shanchu(scope.row)">删除</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="paginationBox">
				<el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
					:page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
					<template slot>
						<span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ pageSize }}条</span>
					</template>
				</el-pagination>
			</div>
		</div>
		<div></div>
	</div>
</template>

<script>
	import breadcrumb from "@/components/breadcrumb.vue";
	import httpApi from "@/http";

	export default {
		data() {
			return {
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				/* 搜索start */
				userName: "",
				createTime: [], //发送时间
				status: "",
				orderStatusArr: [{
						label: "未创建",
						value: "0"
					},
					{
						label: "已创建",
						value: "1"
					},
				],
				platform: "",
				sourceArr: [{
						label: "司机端",
						value: "1"
					},
					{
						label: "货主端",
						value: "2"
					},
				],
				/* 搜索end*/
				data: {
					total: "",
					size: "",
					pages: "",
				},
				records: [],
				pageCurrent: 1, //当前页码
				pageSize: "10", //每页10条
				permissions: {}
			};
		},
		created() {
			this.permissions = JSON.parse(sessionStorage.getItem('permissions'))
			console.log(this.permissions)
		},
		methods: {
			cread1(){
				this.pageCurrent = 1;
			},
			async cread() {
				let res = await this.$http.cargoOwnerApi.queryCreateOrder({
					status: this.status,
					userName: this.userName,
					platform: this.platform,
					pageSize: 10,
					pageIndex: this.pageCurrent,
					startTime: this.createTime != null ? this.createTime[0] : '', //开始时间
					endTime: this.createTime != null ? this.createTime[1] : '', //结束时间
				});
				console.log(res);
				this.records = res.data.data.records;
				this.data.total = res.data.data.total;
				this.data.size = res.data.data.size;
			},

			async shanchu(e) {
				let that = this;
				this.$confirm("此操作将永久删除该建单, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						that.$http.cargoOwnerApi
							.deleteCreateOrder({
								cid: e.cid
							})
							.then((res) => {
								that.cread();
							});
					})
					.catch(() => {});
			},
			getSerialNumber(dataArr) {
				// 前端解决序号
				dataArr.forEach((item, i) => {
					let num = i + 1;
					item.serialNumber = num;
				});
			},
			changePages(e) {
				this.pageCurrent = e
				this.cread()
			},
			CleanUp() {
				(this.status = ""),
				(this.userName = ""),
				(this.platform = ""),
				this.createTime = []
				this.pageCurrent=1;
				this.cread();
			},
			changeSource(val) {
				this.platform = val;
				this.pageCurrent=1;
				this.cread();
			},
			changeOrderStatus(val) {
				this.status = val;
				this.pageCurrent=1;
				this.cread();
			},
			// 记录滚动距离
			scrollEvent(res) {
				this.$route.meta.scrollTop = res.target.scrollTop
			},
		},
		activated() {
			//组件激活时监听表格滚动条位置,
			this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
			// 激活设置滚动位置
			this.$refs.table.bodyWrapper.scrollTop = this.$route.meta.scrollTop
		},
		beforeRouteLeave(to, from, next) {
			// 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
			this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
			next()
		},
		mounted() {
			this.cread();
		},

		components: {
			breadcrumb,
		},
	};
</script>

<style lang="scss" scoped>
	.control {
		height: 76px;
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 29px;
		margin-bottom: 8px;

		.inputItem {
			display: flex;
			align-items: center;
			margin-right: 23px;

			>.title {
				color: #262626;
				font-size: 12px;
				margin-right: 7px;
			}

			>.inputBox {
				width: 160px;

				::v-deep .el-input__inner {
					height: 32px;
					font-size: 12px;
				}

				::v-deep .el-input__inner::placeholder {
					color: #c3c3c3;
					font-size: 12px;
				}
			}

			::v-deep .el-input__icon {
				line-height: 0;
			}
		}
	}

	.main {
		width: 100%;
		height: calc(100vh - 212px);
		background-color: #fff;
		padding: 24px 0 0 0;

		.list {
			height: calc(100% - 48px);
			padding: 0 30px;

			::v-deep .el-table__body-wrapper {
				height: calc(100vh - 330px) !important;
				overflow-y: scroll;
			}

			// 表头样式
			::v-deep .el-table__header th {
				background-color: #f0f6fd;
				color: #262626;
				font-size: 12px;
				font-weight: bold;
				text-align: center;
				height: 48px;
				padding: 0;

				// 表 body的td
				::v-deep .el-table__body td {
					color: #595959;
					font-size: 12px;
				}
			}

			.tag {
				width: 63px;
				height: 28px;
				font-size: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 4px;
				margin: 0 auto;

				.dian {
					width: 4px;
					height: 4px;
					border-radius: 50%;
					margin-right: 4px;
				}

				&.gery {
					background-color: #f7f8f8;
					color: #a8b0b6;

					.dian {
						background-color: #a8b0b6;
					}
				}

				&.dispatched {
					background-color: #ecf5fe;
					color: #1890ff;

					.dian {
						background-color: #1890ff;
					}
				}
			}

			.stateBtns {
				height: 30px;
				width: 76px;

				::v-deep .el-button {
					height: 30px;
					width: 76px;
					font-size: 12px;
					border: none;
					display: flex;
					align-items: center;
					justify-content: center;
					line-height: 30px;
				}

				.waitPass {
					background-color: #ecf5fe;
					color: #1890ff;
				}

				.noPass {
					background-color: #fde8e9;
					color: #f7555d;
				}
			}
		}

		.paginationBox {
			border-top: 1px solid #f0f0f0;
			width: 100%;
			background-color: #fff;
			display: flex;
			height: 48px;
			align-items: center;
			padding: 0 30px;

			.pagination {
				margin-left: auto;
			}
		}
	}

	.dialog {
		::v-deep .el-dialog__header {
			border-bottom: 1px solid #f0f0f0;
			padding: 15px 20px;
			color: #262626;
			font-size: 14px;
			font-weight: bold;
			height: 50px;
		}

		::v-deep .el-dialog__title {
			font-size: 14px;
			color: #303133;
			font-weight: bold;
		}

		//关闭图标
		::v-deep .el-dialog__headerbtn .el-dialog__close {
			font-size: 15px;
		}

		::v-deep .el-dialog__body {
			padding: 20px;
		}
	}
</style>